<!DOCTYPE html>
<html>
  <head>
		<title>管家创建租客合同</title>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> 
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">    
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<link href="../jsp/css/contractCreate.css" rel="stylesheet">
		<!-- 插件样式 -->
		<link rel="stylesheet" href="./css/common.css">
		<link rel="stylesheet" type="text/css" href="./css/sm.min.css">
		<link rel="stylesheet" href="../css/mui/3.7.1/mui.min.css">
		<link rel="stylesheet" href="../css/mui/3.7.1/mui.picker.min.css">
		<link rel="stylesheet" href="../css/mui/3.7.1/mui.poppicker.min.css">

		<!-- 插件js -->
		<!-- <script src="./js/zepto.js"></script> -->
		<!-- <script src="./js/sm.min.js" ></script> -->
		<script type="text/javascript" src="../js/jquery-2.1.1.js"></script>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
		<script type="text/javascript" src="../js/mui/3.7.1/mui.min.js"></script>
		<script type="text/javascript" src="../js/mui/3.7.1/mui.picker.min.js"></script>
		<script type="text/javascript" src="../js/mui/3.7.1/mui.poppicker.min.js"></script>
		<script type="text/javascript" src="../js/mui/cityData.js"></script>
		<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>  
		<script src="js/pointlog.js"></script>
	<style>
        #div1 { margin:0px auto; width:500px; height:370px ; text-align:center; background:url('http://www.codefans.net/jscss/demoimg/wall3.jpg');}
        #div2 {  height:330px; filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;z-index:100; background-color:#ffffff;  }
    p{
    padding: 5px; 
    letter-spacing: 2px;
    }
    </style>
  </head>
	
	<!-- value == 1 是 精装空房托管 的合同模板
	value == 2 || value == 3 是 购置家居套餐托管 || 家私家电齐全托管 的合同模板 -->

	<body style="background: #fff;">
				<!-- 查看示例弹窗 -->
			<div class="see-sampe-panle">
				<div class="sampe--img">
	        	<p style="text-align: center;padding: 5px;">《合租共同协议》</p>
        	<p>每位租户经友好协商，根据《合同法》及国家、当地政府、珠海蓝居实业有限公司（以下简称蓝居）管理制度对房屋租赁的有关规定，就共同租赁使用房屋一事达成以下协议。</p>
        	<p>第一条 各位租户由蓝居匹配，本协议所租房屋位于：<b id="pub-inp-renter_addr_"></b></p>
        	<p>第二条 每位租户享有房间一卧室的完全独立使用权，以及公共区域的共同使用 权。每位租户可以提出对于合租租户的要求，但由蓝居来匹配，由于租户个人要求原因对其他租户刻意不满意的，蓝居有权单方面安排有意见一方或多方的租户进行换房处理，每位租户如果要增加常住合租人数（连续居住超过2天的为常住），必须取得蓝居以及其他租客的同意且签字，重新订立协议，方可增加。</p>
        	<p>第三条 每位租户拥有共同使用区域为客厅、厨房、卫生间、阳台及这些区域里面的相关设施，同时，必须爱护好共同区域的房屋及相应的设施，如有发现破损，请及时拍照上传给蓝居管家及时处理，根据谁导致谁负责的原则处理，若都没能有确凿证据证明谁导致损坏的，按照居住人数进行平摊赔偿损坏费用。</p>
        	<p>第四条 合租期间，本着和平、友好相处的原则，双方应共同维护居住环境的卫生、安全。不得随意干扰其他租户的私人空间。对方的合理建议，应予以采纳。不得随意拿取其他租户的东西，摆放在公共区域的贵重物品请收拾好，如有损失且没能有确凿证据证明其他租户拿取的一律视为损失者自身的责任，与他人无关。</p>
        	<p>第五条 合租期间，水、电、煤气/天然气、宽带费、公共区域卫生清理费按所实际所居住人数平摊。</p>
        	<p>第六条 如有访客来访，应尽量保持安静，以不干扰对方学习、生活为宜。超过2个访客来访，应提前告知其他租户。如因生活需要，维修公共区域设备、添置公共区域设施产生的费用，由所有租客另行协商解决。</p>
        	<p>第七条 租户有下列情况之一的，其他租户必须告诉蓝居，以免伤害自身利益。
　　1、租户未经蓝居许可擅自将房屋转租、转让或转借的。
　　2、租户在房屋进行吸毒、吸气等类似的非法活动，损害他人人身安全的，经常喝酒产生噪音影响他人休息生活的。
	3、不讲究个人卫生，不收拾公共区域私人物品的。
        	</p>
        	<p>第八条 在租住期间，每个租户应本着“节约、爱惜”的原则，不得浪费水、电、煤气/天然气等。应共同维护设施的安全。</p>
        	<p>第九条 公共区域的卫生要求。厨房不得占为己有，摆放好厨房用品，做饭必须及时（不能超过24小时）清洁干净工具，打扫厨房卫生。公共卫生间必须摆放好洗漱用品，不得占为己有，不能产生过多的积水。公共阳台的晾衣必须及时收纳好晾干的衣服，不能产生过多的积水。</p>
        	<p>第十条 产生任何的纠纷必须通知蓝居管家及时协调，不得争吵不得打骂，由于租户导致他人的损坏，一律与蓝居无关，严重者报警处理。</p>
        	<p>第十一条 本协议自订立之日起，即告生效，由甲方、乙方各执一份。</p>
			<p>以上条款协议我已清楚，我承诺遵守以上的协议。
        	</p>
					<span class="close_panle" id="closePanle"></span>
				</div>
			</div>
		<div class="create--box">
		
			<!-- 步骤一  选择创建的合同工模式 -->
			<div class="step_block step_01" id="step01">
				<span class="step_title">步骤一：选择租赁类型</span>
				<div class="inp_radio--list">
					<div class="radio_line">
						<label>
							<input type="radio" name="way" value="1" />
							整租
						</label>
					</div>
					<div class="radio_line">
						<label>
							<input type="radio" name="way" value="2" />
							合租
						</label>
					</div>
				</div>
				<button id="selectNext" class="next_step" disabled>下一步</button>
			</div>

			<!-- 步骤二  填写合同信息 -->
			<div class="step_block step_02" id="step02">
				<span class="step_title">步骤二：填写合同信息</span>
				<!-- 3个合同公共部分 -->
				<div class="input-line public-line">
					<label>
						租客姓名：
						<input type="text" id="pub-inp-renter_name" class="inp" placeholder="请输入租客姓名" />
					</label>
					<label>
						身份证：
						<input type="text" id="pub-inp-renter_idcard" class="inp" placeholder="请输入租客身份证" />
					</label>
					<label>
						租房地址：
						<input type="text" id="pub-inp-renter_addr" class="inp" placeholder="请输入租房地址" />
					</label>
					<label>
						房屋面积：
						<input type="number" id="pub-inp-house_area" class="inp" placeholder="请输入房屋面积" />
					</label>
					<label>
						租赁期：
						<span class="sel" id="pub-date02">开始日期</span>
						<em class="to">至</em>
						<span class="sel" id="pub-date03">结束日期</span>
					</label>
					<label>
						每月租金：
						<input type="number" id="pub-inp-rental_price" class="inp" placeholder="请输入每月租金" /> 元
					</label>
					<label>
						交租周期：
						<select id="pub-inp-pay_period"  class="inp" style="width: 61%;background: #fff;">
							<option>1</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
							<option>5</option>
							<option>6</option>
							<option>7</option>
							<option>8</option>
							<option>9</option>
							<option>10</option>
							<option>11</option>
							<option>12</option>
						</select>月
					</label>
					<label>
						交付押金：
						<select id="pub-inp-cash_pay_month"  class="inp" style="width: 61%;background: #fff;">
							<option>1</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
							<option>5</option>
							<option>6</option>
							<option>7</option>
							<option>8</option>
							<option>9</option>
							<option>10</option>
							<option>11</option>
							<option>12</option>
						</select>月
					</label>
					<label>
						押金合计：
						<input type="number" id="pub-inp-total_cash" class="inp" placeholder="请输入押金总数" /> 元
					</label>
					<label>
						租客电话：
						<input type="text" id="pub-inp-renter_phone" class="inp" placeholder="请输入租客电话" /> 
					</label>
					<label>
						租客紧急联系电话：
						<input type="text" id="pub-inp-urgency_phone" class="inp" placeholder="请输入租客紧急联系电话" /> 
					</label>
					<label>
						租客承担费用：
						<input type="checkbox" name="pub-inp-renter_free"  value="水费"> 水费
						<input type="checkbox" name="pub-inp-renter_free" value="电费"> 电费
						<input type="checkbox" name="pub-inp-renter_free" value="电话费"> 电话费
						<input type="checkbox" name="pub-inp-renter_free" value="网络费"> 网络费
						<input type="checkbox" name="pub-inp-renter_free" value="煤气费"> 煤气费
						<input type="checkbox" name="pub-inp-renter_free" value="有线电视月租费"> 有线电视月租费
						<input type="checkbox" name="pub-inp-renter_free" value="物业管理费"> 物业管理费
						<input type="checkbox" name="pub-inp-renter_free" value="其他费用"> 其他费用
					</label>
				</div>


				<button id="finishFillIn" class="next_step">下一步</button>
			</div>

			<!-- 步骤三  补充协议 -->
			<div class="step_block step_03" id="step03">
				<span class="step_title">步骤三：备注</span>
				<textarea class="add-protocol" id="pub-addProtocol" placeholder="请输入需要备注内容..."></textarea>
				<p class="add-tips">选填，可直接生成合同！</p>
				<p class="add-tips xieyi" style="display: none">同时创建  <span style="color: blue;text-decoration: underline;" id="seeEg">合租协议</span></p>
				<button id="createBtn" class="next_step">确认创建租赁合同</button>
				<!-- <button id="createBtn" class="next_step" style="display: none">生成合同</button> -->
				<!-- <button id="updateBtn" class="next_step" style="display: none">修改合同</button> -->
			</div>
		</div>
	</body>

	<script type="text/javascript">

	function getCheckboxByName(name){
		var value = document.getElementsByName(name);
		var values = "";
		for(var i=0;i<value.length;i++){
			if(value[i].checked){
				values += value[i].value;
				values +=",";
			}
		}
		
		if(values.length >0){
			values = values.substring(0, values.length-1);
		}
		return values;
	}

	/**
	 * 根据值加载多选框
	 * @param name
	 * @param value
	 */
	function showCheckbox(name,value){
		var nValue =  $("input[name='"+name+"']");
		console.log(nValue);
		var sValue = value.split(",");
		for(var i=0;i<nValue.length;i++){
			for(var j=0;j<sValue.length;j++){
				if(nValue[i].value == sValue[j]){
					nValue[i].checked = true;
					break;
				}
			}
		}
		}
		// window.$$=window.Zepto = Zepto;
		/********  因为common.js文件的某个方法和mui插件的方法有冲突，所以把在commom.js需要用到的方法拷贝到此页面  **********/
		// 拿链接上的参数方法
		$.getUrlParam = function (name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			if (r != null) return  decodeURI(r[2]); return null;
		}

		/**
		 * 时间戳转yyyy-MM-dd
		 * @param inputTime
		 * @returns
		 */
		function formatDateTime(inputTime) {  
			var date = new Date(inputTime);
			var y = date.getFullYear();  
			var m = date.getMonth() + 1;  
			m = m < 10 ? ('0' + m) : m;  
			var d = date.getDate();  
			d = d < 10 ? ('0' + d) : d;  
			var h = date.getHours();
			h = h < 10 ? ('0' + h) : h;
			var minute = date.getMinutes();
			var second = date.getSeconds();
			minute = minute < 10 ? ('0' + minute) : minute;  
			second = second < 10 ? ('0' + second) : second; 
			return y + '-' + m + '-' + d;  
			// return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;  
		};
		/********  以上是common.js 的方法  **********/
		
		$(function(){
			var _selectVal = 1;  // 已选择的合同模式
			var	_preFare = [];  // 合同1 的固定收益字段
			var _kongDate = []; // 合同1 的空置期字段
			// if($.getUrlParam("contractId")){$("#createBtn").hide();$("#updateBtn").show();}
			// if(!$.getUrlParam("contractId")){$("#createBtn").show();}
			if($.getUrlParam("contractId"))$("#createBtn").text("确认修改租赁合同");

			function selectHtType() {
				$("#step01").hide();
				$("#step02").show().children("#type0" + _selectVal).show();
			}
			// 打开查看示例弹窗
			$("#seeEg").on("click",function(){
				$(".see-sampe-panle").css("top", "0");
			});
			// 关闭查看示例弹窗
			$("#closePanle").on("click",function(){
				$(".see-sampe-panle").css("top", "130%");
			});
			/************************ 如果链接上带有 contractId 字段，代表修改合同，否则代表创建合同 *******************************/
			if ($.getUrlParam("contractId")) {
				$.ajax({
					type : "POST",
					dataType : 'json',
					url : "../zukeContract/getConstractDetailById",
					data : {
						'contractId': $.getUrlParam("contractId")
					},
					success : function(data) {
						console.log('data:', data);
						if( data.success ){
							var contractDetail = data.contractDetail;
							_selectVal = contractDetail.rental_type;
							$("input[name='way'][value="+contractDetail.rental_type+"]").attr("checked",true); 
							$("#selectNext").attr("disabled", false).css("background", "#0894ec");
							$("#pub-inp-renter_name").val(contractDetail.renter_name); // 用户姓名
							$("#pub-inp-renter_idcard").val(contractDetail.renter_idcard); // 身份证号码
							$("#pub-inp-renter_addr").val(contractDetail.renter_addr); // 房子地址
							$("#pub-inp-renter_addr_").text(contractDetail.renter_addr); // 房子地址
							$("#pub-inp-house_area").val(contractDetail.house_area);
							$("#pub-inp-rental_price").val(contractDetail.rental_price);
							$("#pub-date02").text(formatDateTime(contractDetail.renter_start_time)).addClass("on-sel");
							$("#pub-date03").text(formatDateTime(contractDetail.renter_end_time)).addClass("on-sel");
							$("#pub-inp-pay_period").val(contractDetail.pay_period);
							$("#pub-inp-cash_pay_month").val(contractDetail.cash_pay_month);
							$("#pub-inp-total_cash").val(contractDetail.total_cash);
							$("#pub-inp-renter_phone").val(contractDetail.renter_phone);
							$("#pub-inp-urgency_phone").val(contractDetail.urgency_phone);
							$("#pub-addProtocol").val(contractDetail.remark);// 补充协议
							showCheckbox("pub-inp-renter_free",contractDetail.renter_free);
						}
					}
				});
			}

			/************************ 步骤一 选择合同模式 *********************************/
			// 选择合同模式之后，保存所选择的值，把按钮改成可点击并高亮
			$(".radio_line").on("change", "input", function(){
				_selectVal = $(this).val();
				$("#selectNext").attr("disabled", false).css("background", "#0894ec");
			});

			// 点击下一步，切换到填写对应合同信息模块
			$("#selectNext").on("click", function(val){
				selectHtType();
				if(_selectVal == 2){
					$(".xieyi").show();
				}
			});

			/************************ 步骤二  填写合同信息 *******************************/
			// 选择日期公共方法
			function _selectDate(_this) {
			  var _nowYear = new Date().getFullYear() + 10;
			  _this.picker = new mui.DtPicker({
	          "type": "date",
	          "beginYear": 1930,
	          "endYear": _nowYear
	        });
        _this.picker.show(function(rs) {
          /*
           * rs.value 拼合后的 value
           * rs.text 拼合后的 text
           * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
           * rs.m 月，用法同年
           * rs.d 日，用法同年
           */
					 _this.text(rs.text).addClass("on-sel");
        });
			}

			// 选择日期
			$(document).on('tap', "#pub-date01, #pub-date02, #pub-date03, #pub-date04, .type01-date01, .type01-date02, .type01-date03, .type01-date03-3, #type01-date04, #type03-date01", function() {
				_selectDate($(this));
      });


			// 填写完信息后请求接口保存信息
			$("#finishFillIn").on("click", function(){
				var _pubInput01 = $("#pub-inp01").val(),
				  _address = $("#pub-inp02").val();
				var addr=$("#pub-inp-renter_addr").val();
				$("#pub-inp-renter_addr_").text(addr);
				// 是否选择日期判断
				function _isSelData(selectOr, tips) {
					if (!selectOr.hasClass("on-sel")) {
						mui.toast(tips);
						$(selectOr).trigger("tap");
						return;
					}
					return true;
				}

				// 是否填写信息判断
				function _isInput(selectOr, tips) {
					if (!selectOr.val()) {
						mui.toast(tips);
						selectOr.focus();
						return;
					}
					return true;
				}

				// 需要填写的公共信息
				if (!_isInput($("#pub-inp-renter_name"), "请输入租客姓名") ||
					!_isInput($("#pub-inp-renter_idcard"), "请填写身份证") ||
					!_isInput($("#pub-inp-renter_addr"), "请输入租房地址") ||
					!_isInput($("#pub-inp-house_area"), "请输入房屋面积") ||
					!_isSelData($("#pub-date02"), "请选择开始日期") ||
					!_isSelData($("#pub-date03"), "请选择结束日期") ||
					!_isInput($("#pub-inp-rental_price"), "请输入每月租金")||
					!_isInput($("#pub-inp-pay_period"), "请输入交租周期")||
					!_isInput($("#pub-inp-cash_pay_month"), "请输入交付押金")||
					!_isInput($("#pub-inp-total_cash"), "请输入押金总数")||
					!_isInput($("#pub-inp-renter_phone"), "请输入租客电话")) {
					return;
				}
				
				$("#step02").hide();
				$("#step03").show();

			});

			// 生成合同事件, 请求接口保存用户填的信息
			$("#createBtn").on("click", function(){
				var userId = $.getUrlParam("userId");
				var contractId= $.getUrlParam("contractId");
				var _url = "../zukeContract/createContract";
				var _param = {}, _typeParam = {};
				_param = {
					userId: userId, // 用户id
					renter_name: $("#pub-inp-renter_name").val(), // 用户姓名
					rental_type: _selectVal, // 合同类型
					renter_idcard: $("#pub-inp-renter_idcard").val(), // 身份证号码
					renter_addr: $("#pub-inp-renter_addr").val(), // 房子地址
					house_area : $("#pub-inp-house_area").val(),
					rental_price : $("#pub-inp-rental_price").val(),
					renter_start_time: $("#pub-date02").text(), // 合同开始时间
					renter_end_time: $("#pub-date03").text(), // 合同结束时间
					pay_period : $("#pub-inp-pay_period").val(),
					cash_pay_month : $("#pub-inp-cash_pay_month").val(),
					total_cash : $("#pub-inp-total_cash").val(),
					renter_phone : $("#pub-inp-renter_phone").val(),
					urgency_phone : $("#pub-inp-urgency_phone").val(),
					remark: $("#pub-addProtocol").val(), // 补充协议
					renter_free : getCheckboxByName("pub-inp-renter_free")
				}
				_param = Object.assign(_param, _typeParam);
				console.log('_param:', _param);
				if (contractId) {
					_url = "../zukeContract/updateConstract";
					_param['contractId'] = contractId
				}
				$.ajax({
					type : "POST",
					dataType : 'json',
					url : _url,
					data : _param,
					success : function(data) {
						console.log(data)
						if( data.success){
							// 跳转到合同模板页面
							window.location.href = "renterContractTerms.html?contractId=" + data.contractId+"&agreementType=1";
						}
					}
				});
			});
		});

	</script>
</html>
